<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2020-06-21 20:50:07
 * @LastEditTime: 2020-07-04 10:40:09
 * @FilePath: \client\src\components\Collect.vue
 * @Description: 
--> 
<template>
  <el-row :gutter="20">
    <el-col :span="6" v-for="item in collections" :key="item.imageId">
      <el-card>
        <el-image :src="item.url" fit="cover" :preview-src-list="[item.url]" />
        <div class="content">
          <div class="title" @click="$router.push('/details/'+item.imageId)">{{item.title}}</div>
          <div class="time">{{item.createdAt}}</div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { State } from "vuex-class";
import request from "../http/request";
import Collecting from "../model/Collecting";
import UserInfo from "../model/UserInfo";
@Component
export default class Collect extends Vue {
  @State userInfo: UserInfo;
  collections: Collecting[] = [];
  created() {
    request
      .getCollections(this.userInfo.id)
      .then(res => {
        if (res.data.code === 0) {
          if (res.data.data.length === 0) {
            this.$message({
              showClose: true,
              message: "您当前还未收藏任何内容哦",
              type: "info"
            });
          } else {
            for (const c of res.data.data) {
              this.collections.push(Collecting.create(c));
            }
          }
        } else {
          this.$message({
            showClose: true,
            message: "网络忙，请稍后再试",
            type: "error"
          });
        }
      })
      .catch(err => {
        this.$message({
          showClose: true,
          message: "网络忙",
          type: "error"
        });
      });
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  height: 220px;
  margin-bottom: 10px;
  .el-image {
    width: 100%;
  }
}
.el-image {
  width: 100%;
  height: 120px;
}

.content {
  margin-top: 10px;
  height: 50px;
  .title {
    font-size: 14px;
    color: #303133;
  }
  .title:hover {
    color: #409eff;
    cursor: pointer;
  }
  .time {
    font-size: 12px;
    color: #909399;
  }
}
</style>